<template>
  <div class="main">
    <div class="common-layout">
      <el-header class="myheader">
        <div class="topNav">
          <div class="leftLog">
            Header
          </div>
          <div class="rightmenu">
            <el-menu :default-active="0" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1" @click="goRouter('/main')">
                首页
              </el-menu-item>
              <!-- <el-menu-item index="2" @click="goRouter('/main/source')"> -->
              <el-menu-item index="2"
                @click="handlerClickItem({ name: '资源中心', path: '/src/views/source/index.vue' })">
                资源中心
              </el-menu-item>
              <el-menu-item index="3"
                @click="handlerClickItem({ name: '分类管理', path: '/src/components/category/index.vue' })">
                分类管理
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-container>
          <el-aside width="200px" v-show="showLeftNav">
            <el-menu default-active="0" class="el-menu-vertical-demo" :collapse="isCollapse">
              <el-menu-item index="1" @click="handlerClickItem({ name: '测试', path: '/src/components/test/test.vue' })">
                <template #title>Navigator Two</template>
              </el-menu-item>
              <el-menu-item index="2"
                @click="handlerClickItem({ name: '软件', path: '/src/components/software/pc.vue' })">
                <template #title>软件</template>
              </el-menu-item>
              <el-menu-item index="3"
                @click="handlerClickItem({ name: '书籍管理', path: '/src/components/books/index.vue' })">
                <template #title>书籍</template>
              </el-menu-item>
              <el-menu-item index="4" @click="handlerClickItem({ name: 'api文档', path: '/src/components/api/index.vue' })">
                <template #title>api文档</template>
              </el-menu-item>
              <el-sub-menu index="999">
                <template #title>系统设置</template>
                <el-menu-item index="1-4-1"
                  @click="handlerClickItem({ name: '数据字典', path: '/src/components/dataDictionart/index.vue' })">数据字典</el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-aside>
          <el-main>
            <!-- <dxTab ref="dxTabRef" v-if="false"></dxTab> -->
            <RouterView></RouterView>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import { RouterView, RouterLink } from 'vue-router'
import dxTab from '@/components/dx-tab.vue'
export default {
  components: {
    dxTab
  },
  data() {
    return {
      isCollapse: false,
      oldTopName: "",
      showLeftNav: true
    }
  },
  methods: {
    addTabPan(name, path) {
      this.$refs.dxTabRef.addTab(name, path)
    },
    handlerClickItem(item) {
      // this.addTabPan(item.name, item.path)
      let obj = { name: item.name, path: item.path }
      this.$router.push({ path: "/main/dxTab", query: obj })
    },
    goRouter(name) {
      if (name == this.oldTopName) {
        return
      }
      this.oldTopName = name
      if (name == '/main/source') {
        this.showLeftNav = false
      } else {
        this.showLeftNav = true
      }
      this.$router.push({ path: name })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.common-layout,
.el-container,
.el-menu {
  height: 100%;
}

.myheader {
  border-bottom: 1px solid rgb(204, 203, 203);
}

.topNav {
  display: flex;
  flex-direction: row;
  height: inherit;
}

.el-header {
  padding: 0px;
}

.leftLog {
  height: inherit;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(204, 203, 203, 0.705);
}

.rightmenu {
  width: calc(100% - 200px);
}

.rightCenter {
  height: inherit;
}
</style>